<template>
	<view class="viewport" :style="{paddingTop:safeArea}">
		<view class="login-panel">
			<image src="../../static/logo.png" mode=""></image>
			<view class="login-user">
				<text class="login-nick">未登录</text>
				<text class="login-sub">点击登录账号</text>
			</view>
		</view>
		<view class="card">
			<view class="card-title">
				<text class="t-left">我的订单</text>
				<text class="t-right">查看全部订单</text>
			</view>
			<view class="card-option">
				<text class="icon-currency">待付款</text>
				<text class="icon-currency">待付款</text>
				<text class="icon-currency">待付款</text>
				<text class="icon-currency">待付款</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		computed: {
			safeArea() {
				return uni.getSystemInfoSync().safeAreaInsets.top + 'px'
			}
		},
		methods: {

		}
	}
</script>
<style lang="scss">
	page {
		height: 100%;
	}

	.viewport {
		background-color: #f1f1f1;
		height: 100%;
		background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/center_bg.png);
		background-size: 100% auto;
		background-repeat: no-repeat;
		display: flex;
		flex-direction: column;
	}

	.login-panel {
		display: flex;
		/* #ifdef H5 */
		margin-top: 30rpx;
		/* #endif */
		
		padding: 0 30rpx;

		image {
			height: 150rpx;
			width: 150rpx;
			border-radius: 75rpx;

		}

		.login-user {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			padding: 20rpx;

			.login-nick {
				font-size: 30rpx;
				color: #fff;
			}

			.login-sub {
				font-size: 24rpx;
				color: #fff;
			}
		}
	}

	.card {
		display: flex;
		flex-direction: column;
		margin: 40rpx 20rpx 0;
		padding: 20rpx;
		background-color: white;
		border-radius: 10rpx;

		.card-title {
			line-height: 30rpx;
			.t-left {
				font-size: 28rpx;
			}

			.t-right {
				float: right;
				font-size: 24rpx;
				color: #bebebe;
				&::after {
					
					content: '\e6c2';
					font-family: "erabbit" !important;
				}
			}
		}
		.card-option {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx 20rpx 10rpx;
			.icon-currency {
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 24rpx;
				&::before{
					font-size: 60rpx;
					color: orange;
					margin-bottom: 10rpx;
				}
			}
		}
	}
</style>